<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Document</title>
    </head>
<body>
    <div id = 'app'>
        <h1>人物介绍-石原里美</h1>
        <p>
            <router-link to="/info">基本信息</router-link>
            <router-link to="/yyjl">演艺经历</router-link>
            <router-link to="/zyzp">主要作品</router-link>
        </p>
        <!-- 路由出口 -->
        <router-view></router-view>
    </div>
<script src = "vue.js"></script>
<script src = 'vue-router.js'></script>
<script>
    // 1.定义组件模板
    const info = {template: '<div>石原里美 35 女 演员</div>'}
    const yyjl = {template: '<div>失恋巧克力职人 </div>'}
    const zyzp = {template: '<div>非正常死亡</div>'}
    // 2.定义路由列表
    const routes = [
        {path:'/info',component:info},
        {path:'/yyjl',component: yyjl},
        {path:'/zyzp',component:zyzp}
    ]
    // 3.创建路由对象
    const router =new VueRouter({
        routes
    })
    // 4.配置路由对象
    new Vue({
        el:'#app' ,
        router
    })
</script>
</body>
</html>